<template>
  <div>
    <div>
      <a-input-search
      placeholder="input search text"
      enter-button="Search"
      size="small"
      v-model="searchText"
      @search="onSearch"
      />
    </div>
    <a-table :columns="columns" 
    :data-source="showList" 
    :pagination={total:showList.length,defaultPageSize:5}
    bordered>
       <template slot="avatar" slot-scope="props">
         <img :src="props"/>
       </template>
       <template slot="created_at" slot-scope="props">
         <p>{{props | timeFilter}}</p>
       </template>
       <template slot="action" slot-scope="text, record">
         <div class="action_container">
           <a-button type="primary" shape="circle" icon="search" size="small"
           @click="onClickDetails(record)"/>
           <a-button type="danger" shape="circle" icon="delete" size="small"
           @click="onClickDelete(record)"/>
         </div>
       </template>
    </a-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      data:[],
      showList:[],
      searchText:"",
      columns:[
        {
          title:"UID",
          dataIndex:"uid"
        },
        {
          title:"姓名",
          dataIndex:"nickname"
        },
        {
          title:"头像",
          dataIndex:"avatar",
          scopedSlots: { customRender: 'avatar' },
        },
        {
          title:"手机号",
          dataIndex:"mobile"
        },
        {
          title:"状态",
          dataIndex:"status"
        },
        {
          title:"创建时间",
          dataIndex:"created_at",
          scopedSlots:{customRender:"created_at"}
        },
        {
          title:"操作",
          dataIndex:"action",
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  methods:{
    onClickDetails(record){
      console.log(record);
      this.$router.push({
        name:"Details",
        params:{
          user:record
        }
      })
    },
    onClickDelete(record){
      var index = this.data.findIndex((element)=>{
        return  element.uid === record.uid
      });

      if(index != -1){
        this.data.splice(index,1);
      }
    },
    onSearch(){
      this.showList = [];
      this.data.forEach((element)=>{
        if(element.nickname.includes(this.searchText)){
          this.showList.push(element)
        }
      })
    }
  },
  filters:{
    timeFilter(value){
      var date = new Date(value*1000);
      var str = `${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}分，${date.getFullYear()}年`;
      return str;
    }
  },
  mounted(){
    axios.get("http://localhost:8080/list.json").then((res)=>{
      console.log(res);
      this.data = res.data;
      this.showList = res.data;
    })
  }
}
</script>

<style scoped>
img
{
  width: 40px;
  height: 40px;
}

.action_container
{
  width: 80px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
</style>